import React, { useState, useEffect, useRef } from 'react'
import './myscss/Bark_card.scss'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { Toast } from 'react-vant';
axios.defaults.baseURL = 'http://localhost:3000';

export default function Bark_card() {
    let navigate = useNavigate();

    const [names, setNames] = useState('');
    const [Bank_card_number, setBank_card_number] = useState('');
    const [bank, setBank] = useState('');
    const [ID, setID] = useState('');
    const [phone, setPhone] = useState('');
    let [codeTxt, setCodeTxt] = useState('发送验证码')
    let [countdown, setCountdown] = useState(60)
    let [code, setCode] = useState('788674')
    const [payment_password, setPayment_password] = useState('');
    const [yzm, setYzm] = useState('');
    const [banks_list, setBanks_list] = useState([]);
    let getBark = async () => {
        let { data: { bank } } = await axios.get('/get_bank')
        setBanks_list(bank)
    }
    let getCode = async () => {
        //发送验证码
        let { data } = await axios.get('http://localhost:3000/kwl_getCode?phone=' + phone)
        setCode(data)
        //倒计时

        let timer = setInterval(() => {
            setCountdown(prevCountdown => {
                if (prevCountdown <= 1) {
                    clearInterval(timer)
                    setCodeTxt('发送验证码')
                    return 60
                } else {
                    setCodeTxt(prevCountdown - 1 + 's秒后重新发送')
                    return prevCountdown - 1
                }
            })
        }, 1000)
    }
    let add_bankCard = async () => {
        let { data } = await axios.post('/add_bankcard', {
            name: names,
            Bank_card_number: Bank_card_number,
            bark: bank,
            ID: ID,
            phone: phone,
            payment_password: payment_password,
            zt: false,
        })
        if (data.code == 200) {
            Toast('银行卡添加成功')
            navigate('/MinPage/Barks')
        }
    }

    


    // 使用 useEffect 设置定时器
    useEffect(() => {
        getBark()

    }, []);
    return (
        <div id='Bark_card'>
            <div id="main">
                <div className='fans_length'>
                    <b onClick={() => { navigate('/MinPage/Barks') }}>&lt;</b><span>添加银行卡</span>
                </div>
                <div id="bark_card">
                    <div>
                        <span><label >持卡人</label></span>
                        <input type="text" value={names} onChange={(e) => { setNames(e.target.value) }} placeholder='请输入持卡人姓名' />
                    </div>
                    <div>
                        <span>  <label >银行卡号</label></span>
                        <input type="text" placeholder='请输入银行卡号' value={Bank_card_number} onChange={(e) => { setBank_card_number(e.target.value) }} />
                    </div>


                    <div>
                    </div>
                    <div>
                        <span>  <label >选择银行</label></span>
                        <select value={bank} onChange={(e) => { setBank(e.target.value) }} >
                            <option value="">请选择银行</option>
                            {
                                banks_list.map((item, index) => (
                                    <option value={item._id} key={index}>{item.name}</option>
                                )

                                )
                            }
                        </select>
                    </div>
                    <div>
                        <span>  <label >身份证号</label></span>
                        <input type="text" maxLength={18} placeholder='请输入身份证号码' value={ID} onChange={(e) => { setID(e.target.value) }} />
                    </div>
                    <div>
                        <span> <label >银行留存手机号</label></span>
                        <input type="text" maxLength={11} placeholder='请输入银行留存手机号' value={phone} onChange={(e) => { setPhone(e.target.value) }} />
                    </div>
                    <div>
                        <span> <label >支付密码</label></span>
                        <input type="text" placeholder='请输入支付密码' value={payment_password} onChange={(e) => { setPayment_password(e.target.value) }} />
                    </div>
                    <div className='bark_yzm'>
                        <span><label >验证码</label></span>
                        <div>
                            <input type="text" placeholder='请输入验证码' value={yzm} onChange={(e) => { setYzm(e.target.value) }} />
                            <p onClick={getCode}>{codeTxt}</p>
                        </div>
                    </div>
                    <div>
                        <button onClick={() => { add_bankCard() }}>提交</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

